<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页查询</title>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="page.js"></script>

</head>
<body>

<div id="a" style="...">
    <table >
        <tr>
            <th style="text-align: left;width: 50px">编号</th><th>标题</th><th>时间</th><th>内容</th>
        </tr>
        <tr v-for=" row in result.data" >
            <td style="text-align: left;width: 50px">{{row.id}}</td>
            <td>{{row.title}}</td>
            <td>{{row.intime}}</td>
            <td>
                <div style="max-width: 200px;max-height: 20px;overflow: hidden">
                    {{row.content}}
                </div>
            </td>
        </tr>


    </table>
  <el-pagination ref="p" @page-change="query"
          background page-size="10" current-page="1"
          :total="result.total"
          layout="first,prev,pager,next,last">
  </el-pagination>
</div>



<script>
  var v = new Vue({
    el:"#a",
    data:{
        result : {}
    },
      created(){
            axios.get(`../../QueryNewsServlet.s?currentPage=1&pageSize=10`).then(res=>{
            this.result =res.data;
        });
      },
      methods:{
        query(curPage) {
            axios.get(`../../QueryNewsServlet.s`,{
                params:{
                    currentPage:curPage,
                    pageSize:this.$refs.p.pageSize
                }
            }).then(res=>{
                this.result=res.data;
            });
        }
      }
  });
</script>
</body>
</html>